@extends('front.public_layout.layout')


@section('style')
    <link rel="stylesheet" href="{{asset('/front/lib/muiplayer/mui-player/dist/mui-player.min.css')}}">
    <link rel="stylesheet" href="{{asset('/front/css/article.css')}}">
    <link rel="stylesheet" href="{{asset('/front/css/reservation.css')}}">
    <style>

    </style>


    <script src="{{asset('front/lib/image-preview/js/imagePreview.min.js')}}"></script>
    <script src="{{asset('front/lib/muiplayer/mui-player/dist/mui-player.min.js')}}"></script>
    <script src="{{asset('front/lib/muiplayer/mui-player-desktop-plugin/dist/mui-player-desktop-plugin.min.js')}}"></script>
@endsection

@section('content')
    <div class="middle-content">

        <div class="reservation-list">

            <div class="r-item">
                <div class="head-img">
                    <img src="{{ img_url($thingsData['villager']['head_portrait_url']) }}" alt="">
                </div>

                <div class="r-content">
                    <div class="follow-btn">关注</div>
                    <div class="author">{{ $thingsData['villager']['real_name'] ? $thingsData['villager']['real_name'] : $thingsData['villager']['user_name'] }}</div>
                    <div class="publish-time">{{ $thingsData['created_at'] }}</div>
                    <div class="title">
                        @if ($thingsData['region_info'])
                            <span class="checked">【{{ $thingsData['region_info']['region_name'] }}】</span>
                        @endif
                        {{ $thingsData['content'] }}
                    </div>

                    @if ($thingsData['imgs_url'])
                        <div class="img-list" id="c_imgs{{ $thingsData['id'] }}">
                            @foreach($thingsData['imgs_url'] as $imgsUrlVal)
                                <div><img src="{{ $imgsUrlVal }}" alt=""></div>
                            @endforeach
                        </div>
                        <script>
                            ImagePreview.init({id:$("#c_imgs"+'{{ $thingsData['id'] }}'+" div img")});
                        </script>
                    @endif

                    @if ($thingsData['video_url'])
                        <div class="video-info">
                            <div id="mui-player{{ $thingsData['id'] }}" class="video-div"></div>
                        </div>
                        <script>
                            var mp = new MuiPlayer({
                                container:'#mui-player'+'{{$thingsData['id']}}',
                                title:'',
                                src:'{{ $thingsData['video_url'] }}',
                                poster:'{{ $thingsData['video_img_url'] }}',
                                videoAttribute:[
                                    {attrKey:'webkit-playsinline',attrValue:''},
                                    {attrKey:'playsinline',attrValue:''},
                                    {attrKey:'x5-playsinline',attrValue:''},
                                    {attrKey:'t7-video-player-type',attrValue:'inline'},
                                    {attrKey:'x5-video-player-type',attrValue:'h5-page'},
                                    {attrKey:'x-webkit-airplay',attrValue:'allow'},
                                    {attrKey:'controlslist',attrValue:'nodownload'},
                                ],
                                plugins: [
                                    typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({}) : {},
                                ]
                            });
                        </script>
                    @endif

                    <div class="clear"></div>

                    <div class="r-opt">
                        <a class="share-num">{{ $thingsData['share_num'] }}</a>
                        <a class="common-num">
                            {{ $thingsData['comment_num'] }}
                        </a>
                        <a class="zan-num">{{ $thingsData['zan_num'] }}</a>
                    </div>
                </div>

            </div>
        </div>

        <input type="hidden" name="common_list_url" value="{{ url('ajax_things_common_lists') }}">
    </div>

@endsection


@section('js')

    <script>

        function common_list(things_id, is_first = 0) {
            if (is_first == 1) {
                var list_url = $('input[name="common_list_url"]').val();
            } else {
                var list_url = $('input[name="common_list_url'+things_id+'"]').val();
            }
            $.post(list_url, {
                _token: '{{ csrf_token() }}',
                things_id: things_id
            }, function (data) {
                if (data) {
                    if (is_first == 1) {
                        $('.r-item').find('.common-list').remove();
                        $('.r-item').append(data);
                    } else {
                        $('input[name="common_list_url'+things_id+'"]').remove();
                        $('.r-item').find('.more-common').remove();
                        $('.r-item').find('.common-list').append(data);
                    }
                }
            }, 'html');
        }

        common_list('{{ $thingsId }}', 1);
    </script>
@endsection